<template>
	<view>
		<!-- 语言弹窗 -->
		<view class="cu-modal" :class="modalName=='RadioModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
				<radio-group class="block" @change="RadioChange2">
					<view class="cu-list menu text-left">
						<view class="cu-item">
							<label class="flex justify-between align-center">
								<image src="../../static/UK.png" mode="" style="width: 50rpx;height: 35rpx;"></image>
								<view class=" ">{{i18n.login.english}} </view>
								<radio class="round" style="right: 13px; position: fixed;" :class="radio2== '0'?'checked':''" :checked="radio2== '0'?true:false"
								 :value="'0'"></radio>
							</label>

						</view>
						<view class="cu-item">

							<label class="flex justify-between align-center">
								<image src="../../static/CH.png" mode="" style="width: 50rpx;height: 35rpx;"></image>
								<view class=" ">{{i18n.login.simplified}} </view>
								<radio class="round" style="right: 13px; position: fixed;" :class="radio2== '1'?'checked':''" :checked="radio2== '1'?true:false"
								 :value="'1'"></radio>
							</label>
						</view>
						<view class="cu-item">
						
							<label class="flex justify-between align-center">
								<image src="../../static/CH.png" mode="" style="width: 50rpx;height: 35rpx;"></image>
								<view class=" ">{{i18n.login.traditional}} </view>
								<radio class="round" style="right: 13px; position: fixed;" :class="radio2== '2'?'checked':''" :checked="radio2== '2'?true:false"
								 :value="'2'"></radio>
							</label>
						</view>
					</view>
				</radio-group>
			</view>
		</view>
		<!-- 客服弹窗 -->
		<view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">{{i18n.user.CustomerService}}</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="cu-form-group">
					<view v-html="myconfig.base_kefu"></view>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-purple text-purple" @tap="hideModal">{{i18n.popup.cancel}}</button>
						<button class="cu-btn bg-yellow margin-left" @tap="hideModal">{{i18n.popup.confirm}}</button>

					</view>
				</view>
			</view>
		</view>
		<!-- 顶部导航 -->
		<view class="cu-bar bg-yellow text-black">
			<view class="action " style="font-weight: 600;">
				<image class="cu-avatar round " :src="userinfo.avatar ? userinfo.avatar : '/static/my/demo.png'" mode="" @tap="navTo('/pages/set/set')"></image>

			</view>
			<view class="text-bold" style="margin-right: auto;padding-left: 10px;">
{{i18n.user.level}}：{{myconfig.vip_level[userinfo.level]}}
				<view class="username" v-if="userinfo.id">UID:{{userinfo.username}} 
				</view>

				<text class="username" v-else @click="toLogin">{{i18n.user.login}}</text>
			</view>
			<!-- <view class="action " style="font-weight: 600;">
				<image style="width: 24px;height: 24px;" src='/static/my/msg.png' mode="" @tap="navTo('/pages/user/znx')"></image>
			</view> -->
		</view>
		<view class="top-bg bg-yellow"></view>
		<view class="bg-white radius" style="margin: -75px 16px 0px;">
			<view class="bg-white radius">

				<view class="flex  ">
					<view class="flex-sub padding  " @tap="navTo('/pages/money/finance?index=wall1')">
						<text class="tit3 ">{{i18n.wallet.wall1}}</text>
						<view class="tit4 ">{{userinfo.wall1||0}} 
						</view>

					</view>
					<!-- <view class="flex-sub padding text-right "  @tap="navTo('/pages/money/finance?index=wall2')">
						<text class="tit3 ">{{i18n.wallet.wall2}}</text>
						<view class="tit4">{{userinfo.wall2||0}}
						</view>

					</view> -->
				</view>
				
				<!-- <view class="flex  ">
					<view class="flex-sub padding-sm radius text-center" @tap="navTo('/pages/money/finance?index=wall1')">
						<view class="tit2 ">{{userinfo.wall1||0}}</view>
						<text class="tit1 ">{{myconfig.cointype.wall1}}</text>
					</view>
					<view class="flex-sub padding-sm radius text-center" @tap="navTo('/pages/money/finance?index=wall2')">
						<view class="tit2 ">{{userinfo.wall2||0}}</view>
						<text class="tit1 ">{{myconfig.cointype.wall2}}</text>
					</view>
					<view class="flex-sub padding-sm radius text-center" @tap="navTo('/pages/money/finance?index=wall3')">
						<view class="tit2 ">{{userinfo.wall3||0}}</view>
						<text class="tit1 ">{{myconfig.cointype.wall3}}</text>
					</view>
				</view> -->

			</view>
			<view class="flex padding-xs">
				<view class="flex-sub padding-xs">
					<button class="cu-btn   bg-yellow botton-b" @tap="navTo('/pages/money/charge2')">{{i18n.wallet.charge}}</button>
				</view>
				<view class="flex-sub padding-xs">
					<button class="cu-btn   botton-b" @tap="navTogocash">{{i18n.wallet.cash}}</button>
				</view>
				<!-- <view class="flex-sub padding-xs">
					<button class="cu-btn    botton-b" @tap="navTo('/pages/money/transfers?index='+ptype)">{{i18n.wallet.Transfer}}</button>
				</view> -->
				<!-- <view class="flex-sub padding-xs">
					<button class="cu-btn sm botton-b" @tap="navTo('/pages/money/transfers2?index=wall3')">{{i18n.wallet.Transfer3}}</button>
				</view> -->
				<!-- <view class="flex-sub padding-xs">
					<button class="cu-btn botton-b" @tap="navTo('/pages/money/transfers3')">{{i18n.wallet.Transfer2}}</button>
				</view> -->
			</view>

		</view>
 


		<view class="cover-container" :style="[{
				transform: coverTransform,
				transition: coverTransition
			}]"
		 @touchstart="coverTouchstart" @touchmove="coverTouchmove" @touchend="coverTouchend">

			<!-- <image class="arc" src="/static/arc.png"></image>
			<view class="tj-sction">
				<view class="tj-item">
					<text class="num">128.8</text>
					<text>余额</text>
				</view>
				<view class="tj-item">
					<text class="num">0</text>
					<text>优惠券</text>
				</view>
				<view class="tj-item">
					<text class="num">20</text>
					<text>积分</text>
				</view>
			</view> -->
			<!-- <view class="order-section">
				<view class="order-item" @click="navTo('/pages/order/order?state=0')" hover-class="common-hover" :hover-stay-time="50">
					<image src="/static/my/S11.png" mode="aspectFit"></image>
					<text>全部订单</text>
				</view>
				<view class="order-item" @click="navTo('/pages/order/order?state=1')" hover-class="common-hover" :hover-stay-time="50">
					<image src="/static/my/S22.png" mode="aspectFit"></image>
					<text>待付款</text>
				</view>
				<view class="order-item" @click="navTo('/pages/order/order?state=2')" hover-class="common-hover" :hover-stay-time="50">
					<image src="/static/my/S33.png" mode="aspectFit"></image>
					<text>待收货</text>
				</view>
				<view class="order-item" @click="navTo('/pages/order/order?state=3')" hover-class="common-hover" :hover-stay-time="50">
					<text class="iconfont iconicon4"></text>
					<text>待评价</text>
				</view>
			</view> -->

			<!-- 广告 -->
			<!-- <view class="ad-1" v-if="adList.length" @click="navToLink(adList[0])">
				<image :src="adList[0].image" mode="scaleToFill"></image>
			</view> -->
			<!-- 浏览历史 -->
			<!-- <view class="history-section icon" v-if="viewList.length">
				<view class="sec-header"  >
					<text class="iconfont iconlishijilu1"></text>
					<text>足迹</text>
				</view>
				<scroll-view scroll-x class="h-list" v-if="viewList.length">
					<image v-for="(item, index) in viewList" v-if="item.product" :key="index" @click="navTo('/pages/product/product?id=' + item.product.id)"
					 :src="item.product.image[0]"></image>
				</scroll-view> 
			</view> -->

			<scroll-view class="panel-scroll-box" scroll-y="true">
				<view class="cu-list menu card-menu" :class="['sm-border','margin-top']">
					<!-- <view class="cu-item arrow" @tap="navTo('/pages/trade2/add')" v-if="userinfo.is_fa >0">
						<view class="content">
							<text class="cuIcon-vip text-yellow"></text>
							<text >商户挂单</text>
						</view>
					</view> -->
					<!-- <view class="cu-item arrow" @tap="navTo('/pages/maiVIP/maiVIP')">
						<view class="content">
							<text class="cuIcon-vip text-yellow"></text>
							<text >会员中心</text>
						</view>
					</view> -->
					 
					<view class="cu-item arrow" @tap="sm('/pages/set/real')">
						<view class="content">
							<text class="cuIcon-profilefill text-yellow"></text>
							<text >{{i18n.user.realname}}</text>
						</view>
						<view class="action">
							<text class=" ">{{smarr[userinfo.is_sm]}}</text>
						</view>
					</view>
					<!-- <view class="cu-item arrow" @tap="navTo('/pages/user/order')">
						<view class="content">
							<text class="cuIcon-calendar "></text>
							<text >{{i18n.user.tradeorder}}</text>
						</view>
					</view> -->
					<!-- 	<view class="cu-item arrow" @tap="navTo('/pages/user/qorder')">
						<view class="content">
							<text class="cuIcon-calendar "></text>
							<text >{{i18n.user.tradeorder}}</text>
						</view>
					</view> -->


				<!-- 	<view class="cu-item arrow" @tap="navTo('/pages/user/message')">
						<view class="content">
							<text class="cuIcon-message"></text>
							<text>{{i18n.user.feedback}}</text>
						</view>
					</view> -->
					<!-- <view class="cu-item arrow" @tap="navTo('/pages/user/favorite')">
						<view class="content">
							<text class="cuIcon-favorfill "></text>
							<text>我的收藏</text>
						</view>
					</view> -->
					<!-- <view class="cu-item arrow" @tap="navTo('/pages/money/shou')">
						<view class="content">
							<text class="cuIcon-moneybag text-yellow"></text>
							<text>{{i18n.user.commission}}</text>
						</view>
					</view> -->
					<!-- <view class="cu-item arrow" @tap="navTo('/pages/user/team')">
						<view class="content">
							<text class="cuIcon-friendfill text-yellow"></text>
							<text>{{i18n.user.team}}</text>
						</view>
					</view> -->
					<!-- <view class="cu-item arrow" @tap="navTo('/pages/user/share')">
						<view class="content">
							<text class="cuIcon-friendadd "></text>
							<text >邀请好友</text>
						</view>
					</view> -->
					
					<!-- <view class="cu-item arrow" @tap="$api.navToDetails(26)">
						<view class="content">
							<text class="cuIcon-servicefill text-yellow"></text> 
							<text>{{i18n.user.CustomerService}}</text>
						</view>
					</view> -->
					<view class="cu-item arrow" @tap="navTo('/pages/set/set')">
						<view class="content">
							<text class="cuIcon-settingsfill text-yellow"></text>
							<text>{{i18n.user.Set}}</text>
						</view>
					</view>

					<!-- <view class="cu-item arrow" @tap="checkVersion">
						<view class="content">
							<text class="cuIcon-infofill "></text>
							<text >软件更新</text>
						</view>
					</view> -->
					<!-- <view class="cu-item arrow" @tap="navTo('/pages/user/sum')">
						<view class="content">
							<text class="cuIcon-infofill "></text>
							<text >{{i18n.user.analysis}}</text>
						</view>
					</view> -->
					<view class="cu-item arrow"  @tap="$api.navToDetails(27)">
						<view class="content">
							<text class="cuIcon-infofill text-yellow"></text>
							<text>{{i18n.user.about}}</text>
						</view>
					</view>
					<!-- <view class="cu-item arrow" @tap="kefu">
						<view class="content">
							<text class="cuIcon-servicefill text-yellow"></text> 
							<text>{{i18n.user.CustomerService}}</text>
						</view>
					</view> -->
					<view class="cu-item arrow" @tap="toline">
						<view class="content">
							<text class="cuIcon-servicefill text-yellow"></text> 
							<text>line</text>
						</view>
					</view>
					<view class="cu-item arrow"  @tap="$api.navToDetails(28)">
						<view class="content">
							<text class="cuIcon-infofill text-yellow"></text>
							<text>{{i18n.index.icon4}}</text>
						</view>
					</view>
					<!-- <view class="cu-item arrow" @tap="navTo('/pages/news/index')">
						<view class="content">
							<text class="cuIcon-vip text-yellow"></text>
							<text>{{i18n.user.news}}</text>
						</view>
					</view> -->
					<view class="cu-item arrow"   @tap="showModal('RadioModal')">
						<view class="content">
							<text class=" cuIcon-global text-yellow"></text>
							<text >{{i18n.login.language}}</text>
						</view>
					</view>

					<view class="cu-item arrow" v-if="userinfo.id" @click="toLogout">
						<view class="content">
							<text class="cuIcon-forwardfill text-yellow"></text>
							<text>{{i18n.user.exit}}</text>
						</view>
					</view>
				</view>

				<view class="bq-selection">
					<view class="">
						Copyright@2013-{{(new Date().Format('yyyy'))}}
					</view>
					<view class="">
						{{myconfig.name}}{{i18n.user.rights}}
					</view>

				</view>
			</scroll-view>
		</view>

	</view>
</template>
<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	let startY = 0,
		moveY = 0,
		pageAtTop = true;
	export default {
		data() {
			return {
				// smarr: ['未实名', '已实名', '待审核'],
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,
				viewList: [],
				appVersion: 0,
				radio2: '',
				modalName: null,
				adList: [],
			}
		},
		onLoad() {
			// this.init()
			// #ifdef APP-PLUS
			plus.runtime.getProperty(plus.runtime.appid, (wgtInfo) => {
				this.appVersion = wgtInfo.version
			})
			// #endif 
			this.tablang();
			this.getNavData();
		},
		// #ifndef MP
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.navTo('/pages/set/set');
			} else if (index === 1) {
				// #ifdef APP-PLUS
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				currentWebview.hideTitleNViewButtonRedDot({
					index
				});
				// #endif
				uni.navigateTo({
					url: '/pages/notice/notice'
				})
			}
		},
		// #endif
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo,
				myconfig: state => state.user.myconfig
			}),
			hasLogin() {
				return this.userinfo.id ? true : false
			},
			i18n() {
				return this.$t('message');
			},
			smarr() {
				return [this.i18n.user.issm0, this.i18n.user.issm1, this.i18n.user.issm2]
			},
		},
		methods: {
			...mapActions(['logout', 'getUserinfo']),
			init() {
				return new Promise((resolve, reject) => {
					Promise.all([this.getViewList()]).then(res => {
						resolve(res)
					}).catch(e => {
						reject(e)
					})
				})
			},
			navTogocash(){
				uni.removeStorageSync('selectaddress');
				this.navTo('/pages/money/cash');
			},
			tablang() {
				uni.setTabBarItem({
					index: 0,
					text: this.i18n.tabBar.home
				});
				uni.setTabBarItem({
					index: 1,
					text: this.i18n.tabBar.coin
				});
				uni.setTabBarItem({
					index: 2,
					text: this.i18n.tabBar.Wallet
				});
				uni.setTabBarItem({
					index: 3,
					text: this.i18n.tabBar.team
				});
				uni.setTabBarItem({
					index: 4,
					text: this.i18n.tabBar.my
				});
			},
			getViewList() {
				this.$http.post('user.viewlist').then(res => {
					this.viewList = res.data.data
				})
			},
			actionSheetTap() {
				uni.showActionSheet({
					title: '111',
					cancel: '111111',
					itemList: [this.i18n.login.english, this.i18n.login.simplified],

					success: (e) => {
						console.log(e.tapIndex);
						let lang = ['en-US', 'zh-CN'];
						this._i18n.locale = lang[e.tapIndex];
						this.tablang();
					}
				})
			},
			toline(){
				window.location = "http://line.me/ti/p/~ss333111"
				// window.location = "https://t.me/CryptousdtPro"
			},
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url) {
				if (!this.userinfo.id) {
					url = '/pages/public/login';
				}
				uni.navigateTo({
					url
				})
			},
			sm(url) { 
				if (!this.userinfo.id) {
					url = '/pages/public/login';
					uni.navigateTo({
						url
					})
				}
				if (this.userinfo.is_sm == '0') {
					uni.navigateTo({
						url
					})
				} else if (this.userinfo.is_sm == '2') {
					this.$api.msg(this.i18n.user.info1)
				} else if (this.userinfo.is_sm == '1') {
					this.$api.msg(this.i18n.user.info2)
				}
			},
			navPlugin(addon, url) {
				if (this.$tools.has_addon(addon)) this.navTo(url)
			},
			/**
			 *  会员卡下拉和回弹
			 *  1.关闭bounce避免ios端下拉冲突
			 *  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
			 *    transition设置0.1秒延迟，让css来过渡这段空窗期
			 *  3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
			 */
			coverTouchstart(e) {
				/* if(pageAtTop === false){
					return;
				}
				this.coverTransition = 'transform .1s linear';
				startY = e.touches[0].clientY; */
			},
			coverTouchmove(e) {
				/* moveY = e.touches[0].clientY;
				let moveDistance = moveY - startY;
				if(moveDistance < 0){
					this.moving = false;
					return;
				}
				this.moving = true;
				if(moveDistance >= 80 && moveDistance < 100){
					moveDistance = 80;
				}
		
				if(moveDistance > 0 && moveDistance <= 80){
					this.coverTransform = `translateY(${moveDistance}px)`;
				} */
			},
			coverTouchend() {
				if (this.moving === false) {
					return;
				}
				this.moving = false;
				this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
				this.coverTransform = 'translateY(0px)';
			},
			toLogout() {
				this.$emit('hideModal')
				uni.showModal({
					title: this.i18n.popup.tips,
					content: this.i18n.user.exitconfirm,
					cancelText: this.i18n.popup.cancel,
					confirmText: this.i18n.popup.confirm,
					success: (e) => {
						if (e.confirm) {
							this.logout().then(() => {
								this.viewList = []
								this.toLogin();
							})
						}
					}
				});
			},
			toLogin() {
				uni.navigateTo({
					url: '/pages/public/login'
				})
			},
			kefu() {
				uni.navigateTo({
					url: '/pages/webview/webview?url=' + encodeURIComponent(
						this.myconfig.cdnurl + '/addons/kefu/index/mobile')
				})
			},
			kefu2() {
				this.$emit('hideModal')
				uni.showModal({
					title: this.i18n.popup.tips,
					content: this.myconfig.base_kefu,
					cancelText: this.i18n.popup.cancel,
					confirmText: this.i18n.popup.confirm,
					success: (e) => {
						console.log(1)
					}
				});
			},
			showModal(name) {
				this.modalName = name
			},
			hideModal(e) {
				this.modalName = null
			},
			RadioChange2(e) {
				// console.log(this._i18n.messages)
				let lang = ['en-US', 'zh-CN','zh-HK'];
				this._i18n.locale = lang[e.detail.value];
				this.tablang();
				this.radio2 = e.detail.value;
				this.modalName = null
			},
			edit(title, key, value, type, needcode = 0) {
				let form = {
					type: type,
					needcode: needcode,
					nickname: '',
					avatar: '',
					// mobile: this.userinfo.mobile,
					code: '',
					password2: '',
					imtoken: '',
				}
				form[key] = value;
				uni.navigateTo({
					url: `/pages/set/form?data=${JSON.stringify(form)}` + `&title=` + title
				})
			},
			navToLink(item) {
				console.log(item)
				this.$meRouter(item)
			},
			getNavData() {
				this.$http.post('nav', {
					nav_type: [0, 1, 2]
				}).then(res => {
					this.adList = res.data[2] || []
				})
			},
			checkVersion() {
				this.$emit('hideModal')
				let _this = this
				plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
					let platform = uni.getSystemInfoSync().platform
					_this.$http.post('update', {
						version: widgetInfo.version,
						name: widgetInfo.name,
						platform
					}).then(res => {
						var data = res.data
						if (data.update == 1) {
							uni.showModal({
								title: '检测到更新，是否下载？',
								content: data.description,
								confirmText: '确定',
								confirmColor: '#FF4443',
								cancelText: "取消",
								cancelColor: '#A9A9A9',
								success: e => {
									if (e.confirm) {
										uni.showLoading({
											icon: 'none'
										})
										uni.downloadFile({
											url: data.wgtUrl,
											success: function(downloadResult) {
												if (downloadResult.statusCode == 200) {
													plus.runtime.install(downloadResult.tempFilePath, {
														force: false
													}, function() {
														uni.hideLoading()
														plus.runtime.restart()
													}, function(e) {
														uni.hideLoading()
														uni.showModal({
															title: '提示',
															content: e.message
														})
													})
												}
											}
										})

									}
								}
							})
						} else {
							uni.showToast({
								title: "当前是最新版本"
							})
						}
					}).catch(e => {})
				});
			},
		},
		onShow() {
			uni.setNavigationBarTitle({
				title:this.i18n.tabBar.my
			})
			// this.getViewList()
			if (this.hasLogin) {
				this.getUserinfo()
				//更新用户区块充币
				this.$http.post('user.updatetoken').then(res => {
					console.log(res)
				})
			}
		},
		onPullDownRefresh() {
			this.init().then(e => {
				uni.stopPullDownRefresh()
			}).catch(e => {
				uni.stopPullDownRefresh()
			})
		}
	}
</script>
<style lang='scss'>
	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	%section {
		display: flex;
		justify-content: space-around;
		align-content: center;
		background: $page-color-light;
		border-radius: 25upx;
		margin-right: 25upx;
		margin-left: 25upx;
		margin-top: 25upx;
	}

	.list-cell {
		display: flex;
		align-items: baseline;
		padding: 20upx $page-row-spacing;
		line-height: 60upx;
		position: relative;
		background: #fff;
		justify-content: center;

		&.log-out-btn {
			margin-top: 40upx;

			.cell-tit {
				color: $uni-color-primary;
				text-align: center;
				margin-right: 0;
				font-size: $font-base + 6upx;
			}
		}
	}

	.user-section {
		height: 700upx;
		padding: 100upx 30upx 0;
		position: relative;

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
			opacity: .7;
			background: linear-gradient(50deg, #f537ef 0%, #e81c07 50%, #fede69 100%);
			background-size: 200% 100%;
			background-position: 0 0;
			animation: bgposition3 3s infinite linear alternate;
		}
	}

	.user-info-box {
		height: 180upx;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 1;

		.portrait {
			width: 130upx;
			height: 130upx;
			border: 5upx solid #fff;
			border-radius: 50%;
		}

		.username {
			font-size: $font-lg + 6upx;
			color: $font-color-dark;
			margin-left: 20upx;
		}
	}

	.vip-card-box {
		display: flex;
		flex-direction: column;
		color: #f7d680;
		height: 240upx;
		background: linear-gradient(left, rgba(0, 0, 0, .7), rgba(0, 0, 0, .8));
		border-radius: 16upx 16upx 0 0;
		overflow: hidden;
		position: relative;
		padding: 20upx 24upx;

		.card-bg {
			position: absolute;
			top: 20upx;
			right: 0;
			width: 380upx;
			height: 260upx;
		}

		.b-btn {
			position: absolute;
			right: 20upx;
			top: 16upx;
			width: 132upx;
			height: 40upx;
			text-align: center;
			line-height: 40upx;
			font-size: 22upx;
			color: #36343c;
			border-radius: 20px;
			background: linear-gradient(left, #f9e6af, #ffd465);
			z-index: 1;
		}

		.tit {
			font-size: $font-base+2upx;
			color: #f7d680;
			margin-bottom: 28upx;

			.yticon {
				color: #f6e5a3;
				margin-right: 16upx;
			}
		}

		.e-b {
			font-size: $font-sm;
			color: #d8cba9;
			margin-top: 10upx;
		}
	}

	.cover-container {
		background: $page-color-base;
		/* margin-top: -150upx; */
		/* padding: 0 30upx; */
		position: relative;
		padding-bottom: 20upx;

		.arc {
			position: absolute;
			left: 0;
			top: -34upx;
			width: 100%;
			height: 36upx;
		}
	}

	.tj-sction {
		@extend %section;

		.tj-item {
			@extend %flex-center;
			flex-direction: column;
			height: 140upx;
			font-size: $font-sm;
			color: #75787d;
		}

		.num {
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 8upx;
		}
	}

	.order-section {
		@extend %section;
		padding: 28upx 0;

		.order-item {
			@extend %flex-center;
			width: 120upx;
			height: 120upx;
			border-radius: 10upx;
			font-size: 14px;
			font-weight: 400;
			color: $font-color-dark;
		}

		.iconfont {
			font-size: 48upx;
			margin-bottom: 18upx;
			color: $font-color-light;
		}

		.icon-shouhoutuikuan {
			font-size: 44upx;
		}
	}

	.history-section {
		padding: 30upx 0 0;
		margin-top: 20upx;
		background: #fff;
		border-radius: 10upx;

		.sec-header {
			display: flex;
			align-items: center;
			font-size: $font-base;
			color: $font-color-dark;
			line-height: 40upx;
			margin-left: 30upx;

			.iconfont {
				font-size: 44upx;
				color: #5eba8f;
				margin-right: 16upx;
				line-height: 40upx;
			}
		}

		.h-list {
			white-space: nowrap;
			padding: 30upx 30upx 0;

			image {
				display: inline-block;
				width: 160upx;
				height: 160upx;
				/* margin-right: 20upx; */
				border-radius: 10upx;
			}
		}
	}

	.bq-selection {
		padding: 15px 0 0;
		margin-top: 10px;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #888;
		font-size: $font-base;
	}

	.contact-btn {
		display: inline-block;
		position: absolute;
		width: 100%;
		background: salmon;
		opacity: 0;
	}

	/* 分类 */
	.cate-section {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
		padding: 50upx 0upx;
		position: relative;

		.cate-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: $font-sm + 2upx;
			color: #fff;
			font-weight: 800;
			border-right: 1px solid #ddd;
			padding-right: 8px;

			&:last-child {
				border: none;
				padding-right: 0px;
			}
		}



		/* 原图标颜色太深,不想改图了,所以加了透明度 */
		image {
			width: 88upx;
			height: 88upx;
			margin-bottom: 14upx;
			border-radius: 50%;
			// opacity: .7;
			// box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
		}
	}

	@keyframes bgposition3 {
		0% {
			background-position: 0 0;
		}

		100% {
			background-position: 100% 0;
		}
	}

	.user-head {
		border-radius: 0 0 15px 15px;
		background: linear-gradient(50deg, #ff008d 0%, #b71ee9 50%, #05f4ff 100%);
		background-size: 200% 100%;
		background-position: 0 0;
		margin-bottom: 10px;
		animation: bgposition3 3s infinite linear alternate;
	}

	.ad-1 {
		width: 100%;
		height: 210upx;
		padding: 10upx 20upx;
		/* background: $page-color-light; */
		margin-top: 20upx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.top-bg {
		width: 100%;
		height: 80px;
		/* background: #FCC652; */

	}
</style>
